<template>
  <div id="app">
    <div class="content">
    <router-view></router-view>
    </div>
    
   <div class="bottom">
    <div class='app-user' :style="{color:$route.path==='/home' ?' red' : ''}" @click="toPage('/home')">
      <van-icon name="home-o" />
      <span>精选</span>
    </div>
    <div class='app-user' :style="{color:$route.path==='/classify' ?' red' : ''} " @click="toPage('/classify')">
      <van-icon name="apps-o" />
      <span>分类</span>
    </div>
    <div class='app-user' :style="{color:$route.path==='/cart' ? 'red ': ''} " @click="toPage('/cart')">
       <van-icon name="shopping-cart-o" />
      <span>购物车</span>
    </div>
    <div class='app-user' :style="{color:$route.path==='/user' ? 'red' : ''}" @click="toPage('/user')">
       <van-icon name="friends-o" />
      <span>个人中心</span>
    </div>
     </div> 
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  },
  methods:{
    toPage(path){
      if(this.$route.path===path){
        return
      }
      this.$router.push({
        path:path
      })
    }
  }
}
</script>

<style lang="scss" scope>
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
#app {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
   
  .content{
    flex: 1;
    overflow: auto;
   
  
  }

.bottom{
  // background: red;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #ddd;
  box-sizing: border-box;
 

 
 .app-user{
  
    flex: 1;
     display: flex;
     flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 12px;

    .van-icon{
      font-size: 20px;
    }

 }

}
}
</style>
